import type { RouteRecordRaw } from 'vue-router'
import HomeVue from '../views/Home.vue'

export const routes: RouteRecordRaw[] = [
  {
    path: '/',
    component: HomeVue, // 同步组件: 打包的时候会将组建代码都打到一个包里导致加载变慢
  },
  {
    path: '/login',
    name: 'login',
    component: () => import('../views/Login.vue'), // 异步组件: 懒加载 推荐写法
  },
  {
    path: '/home', // 一级路由 path前无/
    name: 'home',
    component: () => import('../views/Home.vue'),
    children: [
      {
        path: 'dashboard', // 二级路由
        name: 'dashboard',
        component: () => import('../views/Dashboard.vue'),
        meta: {
          title: '看板菜单',
          subject: 'dashboard_menu',
        },
      },
      {
        path: 'list',
        name: 'list',
        component: () => import('../views/TodoList.vue'),
        meta: {
          title: '事项菜单',
          subject: 'list_menu',
        },
      },
      {
        path: 'base',
        name: 'base',
        component: () => import('../views/BaseTag.vue'),
        meta: {
          title: '基础组件',
          subject: 'base_menu',
        },
      },
      {
        path: 'table',
        name: 'table',
        component: () => import('../views/Table.vue'),
        meta: {
          title: '表格菜单',
          subject: 'table_menu',
        },
      },
      {
        path: 'food/:id', // 动态路由
        name: 'food',
        component: () => import('../views/MyFood.vue'),
        beforeEnter: (to, from) => {
          document.title = '动态路由'
        },
        meta: {
          title: '食物菜单',
          subject: 'food_menu',
        },
      },
      {
        path: 'center',
        name: 'center',
        component: () => import('../views/ToCenter.vue'),
        meta: {
          title: '居中菜单',
          subject: 'center_menu',
        },
      },
      {
        path: 'copy',
        name: 'copy',
        component: () => import('../views/Copy.vue'),
        meta: {
          title: '拷贝菜单',
          subject: 'copy_menu',
        },
      },
      {
        path: 'debu',
        name: 'debu',
        component: () => import('../views/Debu.vue'),
        meta: {
          title: '防抖菜单',
          subject: 'debu_menu',
        },
      },
      {
        path: 'me',
        name: 'me',
        component: () => import('../views/Me.vue'),
        meta: {
          title: '我的菜单',
          subject: 'me_menu',
        },
      },
      {
        path: 'js',
        name: 'js',
        component: () => import('../views/Js.vue'),
        meta: {
          title: 'js基础',
          subject: 'js_menu',
        },
      },
    ],
  },
  {
    path: '/403',
    name: '403',
    component: () => import('../views/403.vue'),
  },
  {
    path: '/404',
    name: '404',
    component: () => import('../views/404.vue'),
  },
  {
    path: '/error',
    name: 'error',
    redirect: '/login',
  },
]
